<template>
  <div id="body">
    <div>豆瓣</div>
    {{ tabName }}
    <div class="containers">hello</div>
    <tab-bar>
      <tab-item :name="'home'">
        <template v-slot:active-icon>
          <img src="@/assets/ic_tab_home_active.png" />
        </template>
        <template v-slot:deactive-icon>
          <img src="@/assets/ic_tab_home_normal.png" />
        </template>
        首页
      </tab-item>
      <tab-item :name="'book'">
        <template v-slot:active-icon>
          <img src="@/assets/ic_tab_subject_active.png" />
        </template>
        <template v-slot:deactive-icon>
          <img src="@/assets/ic_tab_subject_normal.png" />
        </template>
        图书
      </tab-item>
      <tab-item :name="'movie'">
        <template v-slot:active-icon>
          <img src="@/assets/ic_tab_group_active.png" />
        </template>
        <template v-slot:deactive-icon>
          <img src="@/assets/ic_tab_group_normal.png" />
        </template>
        电影
      </tab-item>
      <tab-item :name="'mine'">
        <template v-slot:active-icon>
          <img src="@/assets/ic_tab_profile_active.png" />
        </template>
        <template v-slot:deactive-icon>
          <img src="@/assets/ic_tab_profile_normal.png" />
        </template>
        我的
      </tab-item>
    </tab-bar>
  </div>
</template>
<script>
import TabItem from "@/components/douban/TabItem.vue";
import TabBar from "@/components/douban/TabBar.vue";
import { computed, defineComponent } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    TabItem,
    TabBar,
  },
  setup(props, ctx) {
    let store = useStore();
    let tabName = computed(() => {
      return store.state.currTab;
    });
    return {
      tabName,
    };
  },
});
</script>
<style lang="scss">
.containers {
}

#body {
  background: red;
  width: 100%;
  height: 1000px;
}
</style>